<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
button{
    cursor:pointer;
}
.mytable{
    margin:50px auto 0 auto;
    width:auto;
}
.mytable input{
    min-width:280px;
}
main{
    margin:20px auto;
    padding:20px;
    width:96%;
    max-width:1200px;
    min-height:100px;
    border:1px solid #dddddd;
    word-break: break-all;
}
</style>
</head>
<body>
<table class="mytable">
    <tr>
        <td>developer_id</td>
        <td><input id="developer_id" value="" /></td>
    </tr>
    <tr>
        <td>app_id</td>
        <td><input id="app_id" /></td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <button id="mybutton" type="button">提交</button>
        </td>
    </tr>
    <tr>
        <td colspan="2" align="right">
            获取token成功后, <a href="javascript:redirect()">点击跳转</a>
        </td>
    </tr>
</table>
<main id="main">
</main>
<script type="text/javascript">
token = '';


document.getElementById("mybutton").onclick = function(){
    document.getElementById("main").innerHTML = "";
    
    developer_id= document.getElementById("developer_id").value.trim();
    if(developer_id.length === 0){
        alert("error, developer_id empty");
        return false;
    }else if(developer_id.length !== 32){
        alert("error, developer_id is incorrect about length");
        return false;
    }
    
    app_id      = document.getElementById("app_id").value.trim();
    if(app_id.length === 0){
        alert("error, app_id empty");
        return false;
    }else if(app_id.length !== 32){
        alert("error, app_id is incorrect about length");
        return false;
    }

    var json            = new Object();
    json.developer_id   = developer_id;
    json.app_id         = app_id;
    var data            = JSON.stringify(json);

    var xmlhttp;
    if (window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            var response= xmlhttp.responseText
            document.getElementById("main").innerHTML += "<p>" + response + "</p>";
            var object  = JSON.parse(response);
            if(object.code === 1){
                token   = object.data.token;
            }
        }
    }
    
    xmlhttp.open("POST", '/api/open/token/fetch', true);
    xmlhttp.setRequestHeader('Content-Type','application/json');
    xmlhttp.setRequestHeader('Accept',      'application/json');
    xmlhttp.send(data);
}


function redirect(){
    if(token === ''){
        alert('error, not logined, token empty');
        return false;
    }
    window.location.href = 'test2.html?token=' + token;
}
</script>
</body>
</html>